<template>
	<div class="exchange-list pb-20">
		<fx-account></fx-account>
		<div class="mt-2">
			<div class="tabs flex">
				<div class="tab-item" v-for="(item, index) in tabList" @click="selectIndex(index)"
					:class="[tabIndex === index ? 'active' : '']" :key="index">
					{{ item.title }}
					<!-- ({{ item.value }}) -->
				</div>
			</div>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<div class="all-wrap" v-if="tabIndex === 1">{{ $t('executable') }}({{ implementNumber }})</div>
				<div v-if="tabIndex === 0" class="p-4" v-for="item in list" :key="item">
					<fx-pair :item="item.info"></fx-pair>
					<van-cell :title="_item.title" @click="openShow(item.info)" v-for="(_item, _index) in item.listData"
						:key="_index">
						<template #value>
							<span
								:class="[_index === 0 && _item.value == $t('buy') ? 'blue' : '', _index === 0 && _item.value == $t('sell') ? 'red' : '', _index === 5 && _item.value > 0 ? 'green' : '', _index === 5 && _item.value < 0 ? 'red' : '']">{{
									_item.value
								}}</span>
						</template>
					</van-cell>
				</div>
				<div v-else class="p-4">
					<div v-for="item in list" :key="item">
						<fx-pair :item="item.info"></fx-pair>
						<van-cell :title="_item.title" @click="openShow(item.info)" :value="_item.value"
							v-for="(_item, _index) in item.listData" :key="_index">
							<template #value>
								<span
									:class="[_index === 0 && _item.value == $t('buy') ? 'blue' : '', _index === 0 && _item.value == $t('sell') ? 'red' : '']">{{
										_item.value
									}}</span>
							</template>
						</van-cell>
					</div>
				</div>
			</van-pull-refresh>
		</div>
		<van-popup v-model:show="isShow" closeable round position="bottom"
			:style="{ height: tabIndex === 0 ? '30%' : '45%' }">
			<div class="popup-wrap">
				<div class="sell-warap flex">
					<div class="pair-left">
						<fx-pair :item="checkInfo"></fx-pair>
						<div class="order-no">{{ $t('orderNumber') }}：<span>{{ checkInfo.item.order_no }}</span></div>
					</div>
					<div class="pair-right">
						<div class="title">{{ getStatus(tabIndex == 0 ? checkInfo.item.state :
							checkInfo.item.order_price_type) }}</div>
						<div class="text" :class="[checkInfo.item.direction == 'buy' ? 'blue' : 'red']">{{
							checkInfo.item.direction == 'buy' ? $t('buy') : $t('sell')
						}} {{ year }}@{{ formatNumberToFixedFive(checkInfo.item.mark_price) }}</div>
					</div>
				</div>
				<van-cell class="cell-item-h" v-if="tabIndex === 1 && checkInfo.item.state == 'submitted'">
					<template #title>
						<div class="cell-warp flex" @click="cancelOrder">
							<img src="@/assets/image/trade/the-icon4.png" />
							<span class="custom-title">{{ $t('cancelOrder') }}</span>
						</div>
					</template>
				</van-cell>
				<!-- <van-cell class="cell-item-h" v-if="tabIndex === 1">
					<template #title>
						<div class="cell-warp flex">
							<img src="@/assets/image/trade/the-icon5.png" />
							<span class="custom-title">修改订单</span>
						</div>
					</template>
				</van-cell> -->
				<van-cell class="cell-item-h" v-if="tabIndex === 1">
					<template #title>
						<div class="cell-warp flex" @click="onItem(1)">
							<img src="@/assets/image/trade/the-icon3.png" />
							<span class="custom-title">{{ $t('newOrder') }}</span>
						</div>
					</template>
				</van-cell>
				<van-cell class="cell-item-h" v-if="tabIndex === 0">
					<template #title>
						<div class="cell-warp flex" @click="openWarehouse">
							<img src="@/assets/image/trade/the-icon2.png" />
							<span class="custom-title">{{ $t('closePosition') }}</span>
						</div>
					</template>
				</van-cell>
				<van-cell class="cell-item-h" :title="$t('open') + checkInfo.symbol + $t('chart')">
					<template #title>
						<div class="cell-warp flex" @click="onItem(2)">
							<img src="@/assets/image/trade/the-icon1.png" />
							<span class="custom-title">{{ $t('open') }} {{ checkInfo.symbol }} {{ $t('chart') }}</span>
						</div>
					</template>
				</van-cell>
			</div>
		</van-popup>
	</div>
</template>

<script setup>
import fxPair from '@/components/fx-pair/index.vue'
import fxAccount from '@/components/fx-account/index.vue'
import { useUserStore } from '@/store/user';
import { useI18n } from 'vue-i18n'
import {
	Popup, showToast
} from 'vant';
import {
	ref,
	onMounted, onBeforeMount, onBeforeUnmount
} from 'vue';
import {
	useRouter,
	useRoute
} from 'vue-router';
import {
	contractOrder,
	_contractApplyOrderCancel,
	_contractApplyOrderList
} from "@/service/trade.api.js";
import { formatNumberToFixedFive } from '@/utils'


const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const year = ref('')

const openWarehouse = () => {
	router.push({ path: '/exchange/warehouse', query: { checkInfo: JSON.stringify(checkInfo.value) } })
}

const tabList = ref([{
	title: t('position'),
	value: ''
},
{
	title: t('entrustOrder'),
	value: ''
},
])
const checkInfo = ref({})
const list = ref([])
const implementNumber = ref(0)
let orderType = ref('orders')
let isShow = ref(false)
let tabIndex = ref(0)
const loading = ref(false);
const refreshing = ref(false)
const page = ref(1)
const noData = ref(false)
const finished = ref(false)
const interval = ref(null)

onMounted(async () => {
	let date = new Date()
	year.value = date.getFullYear()
	getContractOrder()
	interval.value = setInterval(() => {
		getContractOrder()
	}, 1000)
})

onBeforeMount(() => {
	if (userStore.userInfo || !userStore.userInfo.token) {
		if (!userStore.userInfo.token) {
			router.push('/login')
		}
	}
})

onBeforeUnmount(() => {
	if (interval.value) {
		clearInterval(interval.value)
	}
})

const getStatus = (index) => {
	if (index == 'created') {
		return t('ClosedPosition')
	} else if (index == 'limit') {
		return t('limitOrder')
	} else {
		return t('position')
	}
}

const onRefresh = () => {
	finished.value = false
	loading.value = true
	list.value = []
	page.value = 1
	noData.value = false
	getContractOrder()
}

const selectIndex = (index) => {
	tabIndex.value = index
	// if (index == 0) {
	// orderType.value = 'hisorders'
	// } else {
	orderType.value = 'orders'
	// }
	page.value = 1
	list.value = []
	getContractOrder()
}

const openShow = (item) => {
	isShow.value = true
	checkInfo.value = item
}

const onItem = (id) => {
	if (id === 1) { // 详情
		router.push('/order/' + checkInfo.value.symbol)
	} else if (id === 2) { //图表
		router.push(`/chart/index?symbol=${checkInfo.value.symbol}`)
	}

}

const cancelOrder = () => {
	let obj = {
		order_no: checkInfo.value.item.order_no
	}
	isShow.value = false
	orderType.value = 'orders'
	page.value = 1
	list.value = []
	implementNumber.value = 0
	_contractApplyOrderCancel(obj).then((res) => {
		showToast(t('submitSuccess'))
		getContractOrder()
	})
}

const getContractOrder = () => {
	let obj = {
		type: orderType.value,
		page_no: page.value,
		page_size: 'all'
	}
	let api = tabIndex.value == 0 ? contractOrder : _contractApplyOrderList
	api(obj).then((res) => {
		loading.value = false;
		refreshing.value = false;
		if (tabIndex.value == 0) { //持仓
			let array = []
			res.map((item) => {
				let obj = {
					listData: [
						{
							title: t('buySell'),
							value: item.direction == 'buy' ? t('buy') : t('sell')
						},
						{
							title: t('number'),
							value: `${item.volume_open / (item.lever_rate ? item.lever_rate : 1)}*${item.lever_rate ? item.lever_rate : 1}x`
						},
						{
							title: t('newPrice'),
							value: formatNumberToFixedFive(item.mark_price)
						},
						{
							title: t('AverageTransactionPrice'),
							value: formatNumberToFixedFive(item.trade_avg_price)
						},
						{
							title: t('openingTime'),
							value: item.create_time
						},
						{
							title: t('profit'),
							value: item.profit == 0 ? '--' : item.profit
						},
						{
							title: t('orderNumber'),
							value: item.order_no
						}
					],
					info: {
						name: item.name,
						symbol: item.symbol,
						status: item.state,
						item: item

					}
				}
				array.push(obj)
			})
			list.value = array
		} else {
			let array = []
			res.map((item) => {
				let obj = {
					listData: [
						{
							title: t('buySell'),
							value: item.direction == 'buy' ? t('buy') : t('sell')
						},
						{
							title: t('number'),
							value: `${item.volume_open / (item.lever_rate ? item.lever_rate : 1)}*${item.lever_rate ? item.lever_rate : 1}x`
						},
						{
							title: t('price'),
							value: item.price
						},
						{
							title: t('state'),
							value: getStatus(item.order_price_type)
						},
						{
							title: t('openingTime'),
							value: item.create_time
						},
						{
							title: t('orderNumber'),
							value: item.order_no
						}
					],
					info: {
						name: item.name,
						symbol: item.symbol,
						status: item.state,
						item: item

					}
				}
				array.push(obj)
			})
			list.value = array
		}
		if (tabIndex.value == 1) {
			implementNumber.value = res.length
			// list.value.map((item) => {
			// 	if (item.info.status == 'submitted') {
			// 		implementNumber.value = implementNumber.value + 1
			// 	}
			// })
		}
		finished.value = true
		// 如果没有数据，显示暂无数据
		if (list.value.length === 0 && page.value === 1) {
			noData.value = true
		}
		// // 如果加载完毕，显示没有更多了
		// if (res.length == 0) {
		// 	finished.value = true
		// }
	})
}
</script>
<style lang="scss" scoped>
:deep(.van-popup__close-icon) {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E6E6E9;
	border-radius: 50%;
	font-size: 14px;
	color: #6D6E74;
}

.exchange-list-box {
	:deep(.van-cell__title) {
		width: 120px;
		flex: none;
		color: var(--van-cell-value-color);
	}

	:deep(.van-cell__value) {
		flex: 1;
		color: var(--van-cell-text-color);
	}
}


.popup-wrap {
	// padding: ;
	padding: 50px 0 0 0;

	.pair-left {
		flex: 1;

		.order-no {
			padding-left: 80px;
			color: $text_color5;
			font-size: 12px;

			span {
				color: $black;
			}
		}
	}

	.pair-right {
		padding-right: 15px;

		.title {
			color: $text_color5;
			font-size: 12px;
			padding-top: 27px;
			text-align: right;
		}

		.text {
			font-size: 12px;
			padding-top: 2px;
		}
	}

	.custom-title {
		font-size: 16px;
		color: #1F2025;
	}

	.cell-warp {
		align-items: center;

		img {
			display: block;
			width: 17px;
			height: 21px;
			margin-right: 10px;
		}
	}
}

.tabs {
	padding: 0 15px;
	border-bottom: 1px solid #eeeeee;
	margin-top: 30px;

	.tab-item {
		width: 100px;
		text-align: center;
		padding: 10px 0;
		font-size: 16px;
		color: $text_color5;
	}

	.active {
		color: #1F2025 !important;
		border-bottom: 2px solid $btn_main;
	}
}

.cell-item-h {
	background: $red;
	padding: 15px 20px;
}

.all-wrap {
	width: 100px;
	background: $btn_main;
	margin: 15px;
	height: 26px;
	line-height: 26px;
	color: $text_color;
	font-size: 14px;
	border-radius: 20px;
	text-align: center;
}

.blue {
	color: $active_line !important;
}

.red {
	color: $red !important;
}


.green {
	color: $green !important;
}

:deep(.van-cell:after) {
	border-bottom: none !important
}

:deep(.van-cell) {
	background: $mainbgWhiteColor !important;
}
</style>
